<template>
  <epgis-nav-container title="注册">
    <template #container>
      
      <div style= "height: 100%; width: 100%;background: white;" class="layoutVerticle">
        <div class="layoutHorizontal layoutCenter" style="margin-top: 80px;">
          <img src="@/assets/icon/register/sex.png"/>
        </div>
        <div class="layoutVerticle layoutCenter">
          <span style=" font-size: 16px; font-weight: bold; margin-top: 20px;">请选择你的性别</span>
          <span style="font-size: 14px; margin-top: 10px;">为你推荐优质的异性青年</span>
        </div>

        <div  @click="secectGirl" v-if="selectSex != SexEnum.SEX_GIRL"  class="layoutHorizontal" style="margin-left: 10%; margin-right: 10%; margin-top: 25px; padding-top: 15px; font-size: 18px; border: 1px solid #fafafa;border-radius: 10px;background: #fafafa;">
           <div class="layoutVerticle layoutCenter" style="display: flex;width: 100%;">
            <img src="@/assets/icon/register/girl_normal.png" style="height: 90px;"/>
          </div>
          <div class="layoutVerticle layoutCenter" style="display: flex;width: 100%;">
            <span style=" font-size: 16px; font-weight: bold;color: #b3b2c2;">女生</span>
            <span style=" font-size: 16px; font-weight: bold; margin-top: 6px;color: #b3b2c2;">girl</span>
          </div>
        </div>

        <div v-if="selectSex == SexEnum.SEX_GIRL" class="layoutHorizontal" style="margin-left: 10%; margin-right: 10%; margin-top: 25px; padding-top: 15px; font-size: 18px; border: 1px solid #fafafa;border-radius: 10px;background: #fafafa;">
           <div class="layoutVerticle layoutCenter" style="display: flex;width: 100%;">
            <img src="@/assets/icon/register/girl_press.png" style="height: 90px;"/>
          </div>
          <div class="layoutVerticle layoutCenter" style="display: flex;width: 100%;">
            <span style=" font-size: 16px; font-weight: bold;color: #323232;">女生</span>
            <span style=" font-size: 16px; font-weight: bold; margin-top: 6px;color:#323232;">girl</span>
          </div>
        </div>

        <div @click="secectBoy" v-if="selectSex != SexEnum.SEX_BOY" class="layoutHorizontal" style="margin-left: 10%; margin-right: 10%; margin-top: 25px; padding-top: 15px; font-size: 18px; border: 1px solid #fafafa;border-radius: 10px;background: #fafafa;">
           <div class="layoutVerticle layoutCenter" style="display: flex;width: 100%;">
            <img src="@/assets/icon/register/boy_nornal.png" style="height: 90px;"/>
          </div>
          <div class="layoutVerticle layoutCenter" style="display: flex;width: 100%;">
            <span style=" font-size: 16px; font-weight: bold;color: #b3b2c2;">男生</span>
            <span style=" font-size: 16px; font-weight: bold; margin-top: 6px;color: #b3b2c2;">boy</span>
          </div>
        </div>

        <div v-if="selectSex == SexEnum.SEX_BOY" class="layoutHorizontal" style="margin-left: 10%; margin-right: 10%; margin-top: 25px; padding-top: 15px; font-size: 18px; border: 1px solid #fafafa;border-radius: 10px;background: #fafafa;">
           <div class="layoutVerticle layoutCenter" style="display: flex;width: 100%;">
            <img src="@/assets/icon/register/boy_press.png" style="height: 90px;"/>
          </div>
          <div class="layoutVerticle layoutCenter" style="display: flex;width: 100%;">
            <span style=" font-size: 16px; font-weight: bold;color: #323232;">男生</span>
            <span style=" font-size: 16px; font-weight: bold; margin-top: 6px;color:#323232;">boy</span>
          </div>
        </div>

        <div @click="nextStep"  class="layoutVerticle layoutCenter " style="position: absolute;bottom: 68px; left: 0; right: 0; margin: 0 auto;">
          <img src="@/assets/icon/register/next.png"/>
        </div>
        


      </div>
    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { MapUtil } from "@/common/mapUtil";
import { NativeUtil } from "@/common/utils";
import * as turf from "@turf/turf";
import { Toast, Notify } from "vant";
import { SexEnum} from "@/views/mine/enums/PersonInformationEnum";

export default {
  components: {},
  data() {
    return {
      selectSex:'',
      registMsg:{},
      SexEnum:SexEnum,
    };
  },

  mounted() {

  },
  destroyed() {
  },
  activated() {
    this.registMsg = sessionStorage.getItem("registMsg");
    if(this.registMsg ){
      this.registMsg = JSON.parse(this.registMsg);
    }
  },
  methods: {

    nextStep() {
      if(this.checkValue()){
        this.registMsg['sex'] = this.selectSex;
        sessionStorage.setItem("registMsg",
          JSON.stringify(this.registMsg)
        );
        this.$router.push({ name: 'RegisterBirthDay' });
      }
    },

    checkValue(){
      if (!this.selectSex) {
        Notify({
            type: "danger",
            message: "请选择性别",
        });
        return false;
      }
      return true;
    },

    secectBoy(){
      this.selectSex = SexEnum.SEX_BOY;
    },

    
    secectGirl(){
      this.selectSex = SexEnum.SEX_GIRL;
    },










    




  },
};
</script>

<style lang="less" scoped>

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }
  .inputBorder{
    position: relative;
    padding: 8px 0px;
    &::after{
      position: absolute;
      box-sizing: border-box;
      content: '';
      pointer-events: none;
      bottom: 0%;
      border-bottom: 1px solid #ebedf0;
      width: 100%;
    }
    /deep/.van-field__control{
      font-size: 16px;
    }
  }

  /deep/.van-cell {
    padding: 0px 0px;
  }






</style>